<template>
    <div class="Assess">
       <el-table size="small" :data="formattedRoomImages" width="98">
            <el-table-column   label="编号" width="180" type="index"/>               
            <el-table-column v-if="false" prop="id"  label="编号" width="100" />               
            <el-table-column  prop="userNickname" label="用户名" width="100"  />
            <el-table-column prop="score" label="评分" width="150" />
            <el-table-column prop="assessInfo" label="评价内容" width="180" />
            <el-table-column prop="roomImage" label="评价图片" width="180" >
                <template #default="scope">
                    <div class="demo-image__preview" v-if="scope.row.assessImageList">
                        <el-image
                        style="width: 100px; height: 100px"
                        :src="scope.row.assessImageList[0]"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :preview-src-list="scope.row.assessImageList"
                        :initial-index="4"
                        fit="cover"
                        />
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="assessDate" label="评价时间" width="180" >
                <template #default="scope">
                    {{ formatTimestamp(scope.row.assessDate) }}
                </template>
            </el-table-column>
            
                
             
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted,computed } from 'vue';
import { $assessList } from "../../api/assess.ts";
let assessList = ref([])
//加载角色列表
const loadAssessList = async()=>{
    assessList.value = await $assessList(); 
}
const formattedRoomImages = computed(() => {
  return assessList.value.map(item => {
    if (item.assessImage) {
      item.assessImageList = item.assessImage.split(';');      
    }
    return item;
  });
});
import { format } from 'date-fns';

const formatTimestamp = (timestamp: number) => {
  return format(new Date(timestamp ), 'yyyy-MM-dd ');
};
onMounted(()=>{
    loadAssessList()
})
</script>

<style lang="scss" scoped>

</style>